<template>
  <div class="mapv" ref="myEchartWorld"></div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/world.js"; // 世界地图数据
import { world } from "@/utils/namemap";
export default {
  name: "MapWorld",
  data() {
    return {
      chart: null,
      timer: null
    };
  },
  mounted() {
    this.chinaConfigure(this.mapWorld);
  },
  beforeDestroy() {
    this.clearTimer();
  },
  methods: {
    clearTimer() {
      //清除定时器
      clearInterval(this.timer);
      this.timer = null;
    },
    chinaConfigure(data) {
      let myChart = echarts.init(this.$refs.myEchartWorld); //这里是为了获得容器所在位置
      myChart.setOption({
        // 进行相关配置
        tooltip: {
          textStyle: {
            align: "left"
          },
          formatter: function(params) {
            const tooltip = `
                ${params.data.name}<br />
                累计确诊：${params.data.confirmedCount}<br />
                现存确诊：${params.data.currentConfirmedCount}<br />
                疑似感染：${params.data.suspectedCount}<br />
                治愈人数：${params.data.curedCount}<br />
                死亡人数：${params.data.deadCount}`;
            return tooltip;
          }
        }, // 鼠标移到图里面的浮动提示框
        visualMap: {
          type: "piecewise",
          show: true,
          min: 0,
          max: 10000,
          realtime: true,
          left: "left",
          top: "bottom",
          pieces: [
            { gt: 10000 },
            { gt: 1000, lte: 10000 },
            { gt: 500, lte: 1000 },
            { gt: 100, lte: 500 },
            { gt: 10, lte: 100 },
            { lte: 10 }
          ],
          color: ["#9e002d", "#ffe7e2"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            type: "map", // 类型
            nameMap: world,
            // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
            name: "世界",
            mapType: "world", // 地图类型
            // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
            roam: true,
            // 图形上的文本标签
            label: {
              show: false // 是否显示对应地名
            },
            // 地图区域的多边形 图形样式
            itemStyle: {
              areaColor: "#FFFFFF", // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
              borderWidth: 0.5, // 描边线宽 为 0 时无描边
              borderColor: "#000", // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
              borderType: "solid" // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
            },
            // 高亮状态下的多边形和标签样式
            emphasis: {
              label: {
                show: true, // 是否显示标签
                color: "#FFFFFF" // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
              },
              itemStyle: {
                areaColor: "#FF6347" // 地图区域的颜色
              }
            },
            data: data
          }
        ]
      });
      // 循环显示tooltip
      let idx = 0;
      this.timer = setInterval(() => {
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: idx
        });
        idx = (idx + 1) % data.length;
      }, 3000);
    }
  },
  props: {
    mapWorld: Array
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.mapv {
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}
</style>
